{% extends 'cms/base.html' %}
{% block title %}新闻列表{% endblock %}
{% block header %}

    <!-- select2-bootstrap4  -->
    <link rel="stylesheet" href="{% static 'adminLTE/plugins/select2/css/select2.min.css' %}">
    <link rel="stylesheet" href="{% static 'adminLTE/plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css' %}">

    <!-- daterangepicker  -->
    <link rel="stylesheet" href="{% static 'adminLTE/plugins/daterangepicker/daterangepicker.css' %}">
{% endblock %}
{% block footer %}

    <!-- select2-bootstrap4  -->
    <script src="{% static 'adminLTE/plugins/select2/js/select2.full.min.js' %}"></script>
    <!-- daterangepicker  -->
    <script src="{% static 'adminLTE/plugins/moment/moment.min.js' %}"></script>
    <script src="{% static 'adminLTE/plugins/daterangepicker/daterangepicker.js' %}"></script>

    <script>
        $(function () {
            $('.select2bs4').select2({
                theme: 'bootstrap4'
            })
            var dateoption = {
                autoApply: true,
                singleDatePicker: true,
                showDropdowns: true,
                autoUpdateInput: false,
                locale: {
                    format: "YYYY-MM-DD",
                    applyLabel: '确定',
                    cancelLabel: '取消',
                    fromLabel: '从',
                    toLabel: '到',
                    weekLabel: 'W',
                    customRangeLabel: 'Custom Range',
                    daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
                    monthNames: ['一月', '二月', '三月', '四月', '五月', '六月',
                        '七月', '八月', '九月', '十月', '十一月', '十二月'],
                }
            }
            $("#start").daterangepicker(dateoption).on('apply.daterangepicker', function (ev, picker) {
                $("#start").val(picker.startDate.format('YYYY-MM-DD'));
            });
            $("#end").daterangepicker(dateoption).on('apply.daterangepicker', function (ev, picker) {
                $("#end").val(picker.startDate.format('YYYY-MM-DD'));
            });

            $('.del-btn').click(function () {
                var trRow = $(this).parents('tr')
                var newsId = trRow.attr('data-pk')
                swal({
                    title: '删除该新闻?',
                    type: 'warning',
                    reverseButtons: true,
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: '删除',
                    cancelButtonText: '取消',
                }).then((result) => {
                    if (result) {
                        xfzajax.get({
                            url: '/cms/news_del/',
                            data: {
                                news_id: newsId
                            },
                            success: function (res) {
                                if (res.code === 200) {
                                    swal({
                                        type: 'success',
                                        title: res.message,
                                        timer: 1500
                                    })
                                    setTimeout(function () {
                                        window.location.reload()
                                    }, 1500)
                                } else {
                                    alert(res.message.constructor === String ? res.message : '删除失败~~')
                                }
                            }
                        })
                    }
                })
            })


        })

    </script>
{% endblock %}
{% block content-header %}
    新闻列表
{% endblock %}
{% block content %}
    <div class="row">
        <div class="col-lg-12">
            <div class="card card-primary card-outline">
                <div class="card-header">
                    <form action="" class="form-inline">
                        <div class="form-group mr-2">
                            <input type="text" class="form-control" readonly id="start" value="{{ start }}" name="start"
                                   placeholder="起始时间">
                            <input type="text" class="form-control" readonly id="end" value="{{ end }}" name="end"
                                   placeholder="截止时间">
                        </div>
                        <div class="form-group mr-2">
                            <input type="text" class="form-control" name="title" value="{{ title }}" placeholder="关键词">
                        </div>
                        <div class="form-group mr-2 col-2">
                            <select class="form-control select2bs4" name="category" style="width: 100%;">
                                {% if category_id %}
                                    <option value="0">所有分类</option>
                                    {% for category in categories %}
                                        {% if category_id == category.id %}
                                            <option value="{{ category.id }}" selected>{{ category.name }}</option>
                                        {% else %}
                                            <option value="{{ category.id }}">{{ category.name }}</option>
                                        {% endif %}
                                    {% endfor %}
                                {% else %}
                                    <option value="0" selected>所有分类</option>
                                    {% for category in categories %}
                                        <option value="{{ category.id }}">{{ category.name }}</option>
                                    {% endfor %}
                                {% endif %}
                            </select>
                        </div>
                        <div class="form-group mr-2">
                            <button class="btn btn-primary">查询</button>
                        </div>
                        <div class="form-group mr-2">
                            <a href="{% url 'cms:news_list' %}" class="btn btn-outline-danger">清除查询</a>
                        </div>
                    </form>
                </div>
                <div class="card-body">
                    <table id="example2" class="table table-hover dataTable">
                        <thead>
                        <tr>
                            <th>标题</th>
                            <th>分类</th>
                            <th>作者</th>
                            <th>发布时间</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <body>
                        {% for news in newses %}
                            <tr data-pk="{{ news.id }}">
                                <td><a target="_blank"
                                       href="{% url 'news:detail_view' news_id=news.id %}">{{ news.title }}</a></td>
                                <td>{{ news.category.name }}</td>
                                <td>{{ news.author.username }}</td>
                                <td>{{ news.pub_time|date:"Y-m-d" }}</td>
                                <td>
                                    <a href="{% url 'cms:news_edit' news_id=news.id %}"
                                       class="btn btn-warning btn-xs edit-btn">编辑</a>
                                    <button class="btn btn-danger btn-xs del-btn">删除</button>
                                </td>
                            </tr>
                        {% endfor %}

                        </body>
                    </table>
                </div>
                <div class="card-footer">
                    <nav aria-label="Page navigation example">
                        <ul class="pagination justify-content-end">
                            <!-- 上一页  -->
                            {% if page_obj.has_previous %}
                                <li class="page-item"><a class="page-link"
                                                         href="?p={{ page_obj.previous_page_number }}{{ url_query }}"
                                                         tabindex="-1">上一页</a></li>
                            {% else %}
                                <li class="page-item disabled"><a class="page-link" href="#" tabindex="-1">上一页</a></li>
                            {% endif %}
                            <!-- 当前页左边  -->
                            {% if left_more %}
                                <li class="page-item"><a class="page-link" href="javascript:;">...</a></li>
                                {% for page_num in left_pages %}
                                    <li class="page-item"><a class="page-link"
                                                             href="?p={{ page_num }}{{ url_query }}">{{ page_num }}</a>
                                    </li>
                                {% endfor %}
                            {% else %}
                                {% for page_num in left_pages %}
                                    <li class="page-item"><a class="page-link"
                                                             href="?p={{ page_num }}{{ url_query }}">{{ page_num }}</a>
                                    </li>
                                {% endfor %}
                            {% endif %}
                            <!-- 当前页  -->
                            <li class="page-item active"><a class="page-link"
                                                            href="?p={{ cur_page }}{{ url_query }}">{{ cur_page }}</a>
                            </li>
                            <!-- 当前页右边  -->
                            {% if right_more %}
                                {% for page_num in right_pages %}
                                    <li class="page-item"><a class="page-link"
                                                             href="?p={{ page_num }}{{ url_query }}">{{ page_num }}</a>
                                    </li>
                                {% endfor %}
                                <li class="page-item"><a class="page-link" href="javascript:;">...</a></li>
                            {% else %}
                                {% for page_num in right_pages %}
                                    <li class="page-item"><a class="page-link"
                                                             href="?p={{ page_num }}{{ url_query }}">{{ page_num }}</a>
                                    </li>
                                {% endfor %}
                            {% endif %}
                            <!-- 下一页  -->
                            {% if page_obj.has_next %}
                                <li class="page-item"><a class="page-link"
                                                         href="?p={{ page_obj.next_page_number }}{{ url_query }}"
                                                         tabindex="-1">下一页</a></li>
                            {% else %}
                                <li class="page-item disabled"><a class="page-link" href="#" tabindex="-1">下一页</a></li>
                            {% endif %}
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>

{% endblock %}